<template>
  <div class="infobox3">
    <div class="block1">平台公告</div>
    <div class="block2_main">
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">基本信息</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">图标显示</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.iconShow">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex" v-if="data.iconShow == 1">
          <div class="tip1">图标</div>
          <div class="tip2">
            <div
              class="uploadbox flex aitems jcenter"
              @click="uploadImg('data.icon')"
            >
              <!-- <input
                type="file"
                ref="uploadfile"
                @change="uploadImg('data.icon')"
                id="fileclass"
                class="fileclass"
                accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              /> -->
              <div class="plusicon" v-if="!data.icon">
                <i class="el-icon-plus"></i>
              </div>
              <div class="uploadimg" v-if="data.icon">
                <img :src="data.icon" mode="aspectFit" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.iconShow == 1">
          <div class="tip1">图标背景</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.iconBgColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.iconShow == 1">
          <div class="tip1">图标边角</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.iconRadius"
                :max="100"
                :min="1"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">边角</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.radius"
                :max="100"
                :min="1"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">文字颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.color"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">背景颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.bgColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">更多显示</div>
          <div class="tip2">
            <div class="input">
              <el-radio-group v-model="data.moreShow">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.moreShow">
          <div class="tip1">更多内容</div>
          <div class="tip2">
            <div class="input">
              <el-input
                placeholder="请输入预设内容"
                size="mini"
                v-model="data.more"
                :maxlength="5"
              >
                <template slot="append"
                  >{{ data.more.length }}/{{ 5 }}</template
                >
              </el-input>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems" v-if="data.moreShow">
          <div class="tip1">更多文字颜色</div>
          <div class="tip2">
            <div class="input">
              <el-color-picker v-model="data.moreColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">滚动速度/秒</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.speed"
                :max="10"
                :min="1"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>
      <div class="block2">
        <div class="info1 flex aitems sb">
          <div class="tip1">组件样式</div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">上内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右内边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.pRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>

        <div class="info2 flex aitems">
          <div class="tip1">上外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mTop"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">下外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mBottom"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">左外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mLeft"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
        <div class="info2 flex aitems">
          <div class="tip1">右外边距</div>
          <div class="tip2">
            <div class="input">
              <el-slider
                v-model="data.style.mRight"
                :max="100"
                :min="0"
                show-input
                input-size="mini"
              ></el-slider>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { uploads } from "@/api/upload";
import linkCom from "../../components/link.vue";
import { getList as getListbulletin } from "@/api/base/bulletin";
export default {
  components: { linkCom },
  props: ["data"],
  data() {
    return {
      navIndex: null,
      navShow: false,
      navForm: {},
      uploadStr: "",
    };
  },
  watch: {},
  mounted() {
    getListbulletin(1, 10).then((res) => {
      let list = res.data.data.records;
      this.data.value = list;
    });
    window.addEventListener("message", ({ data, origin }) => {
      /**看是否需要判断信息来源*/
      console.log(data, origin);
      // if (origin == "http://xpj40szpt.signalpha.cn") {
      const { type, data: sendData } = data;
      switch (type) {
        case "upload":
          console.log("upload");
          console.log(sendData);
          if (this.uploadStr) {
            let key = this.uploadStr.split(".");
            this[key[0]][key[1]] = sendData.ids;
            this.uploadStr = "";
          }
          if (this.tabbarUploadImgKey) {
            this.data.value[this.tabbarUploadImgIndex][
              this.tabbarUploadImgKey
            ] = sendData.ids;
            this.tabbarUploadImgKey = "";
          }
          break;
        case "product":
          console.log("product");
          console.log(sendData);
          break;
        case "seller":
          console.log("seller");
          console.log(sendData);
          break;
        case "community":
          console.log("community");
          console.log(sendData);
          break;
        case "activity":
          console.log("activity");
          console.log(sendData);
          break;
        default:
          break;
      }
      // }
    });
  },
  methods: {
    editorval(val) {
      this.navForm.content = val;
    },
    handleAdd() {
      this.data.value.push({
        name: `图文导航${this.data.value.length + 1}`,
        link: "https://image-c.weimobwmc.com/saas-wxbiz/8afe640edf4c48269f2c17b06dad435d.jpg?imageView2/2/w/750/q/100/interlace/1", //图片链接
        urlType: 1, //1无跳转 2小程序 3内容详情 4功能页面 5外部页面
        size: "1280*720", //尺寸
        w: 1280,
        h: 720,
        miniappid: "", //2小程序APPID
        minipath: "", //2小程序路径
        content: "", //3内容详情
        path: "", //4内部页面路径
        params: "", //4携带参数
        goodsid: "", //4商品ID
        url: "", //5外部页面
      });
    },
    uploadImg(str) {
      this.uploadStr = str;
      window.parent.postMessage(
        {
          type: "upload",
          options: {
            limit: 1,
          },
        },
        "*"
      );
    },
    imgDel(index) {
      this.data.value.splice(index, 1);
    },
    settingNav(index) {
      this.navIndex = index;
      this.navShow = true;
      this.navForm = {
        urlType: this.data.value[index].urlType,
        miniappid: this.data.value[index].miniappid,
        minipath: this.data.value[index].minipath,
        content: this.data.value[index].content,
        path: this.data.value[index].path,
        params: this.data.value[index].params,
        goodsid: this.data.value[index].goodsid,
        cateid: this.data.value[index].cateid,
        url: this.data.value[index].url,
      };
    },
    navSubmit(form) {
      this.data.value[this.navIndex].urlType = form.urlType;
      if (form.urlType == 2) {
        this.data.value[this.navIndex].miniappid = form.miniappid;
        this.data.value[this.navIndex].minipath = form.minipath;
      }
      if (form.urlType == 3) {
        this.data.value[this.navIndex].content = form.content;
      }
      if (form.urlType == 4) {
        this.data.value[this.navIndex].path = form.path;
        this.data.value[this.navIndex].goodsid = form.goodsid;
        this.data.value[this.navIndex].cateid = form.cateid;
        this.data.value[this.navIndex].params = form.params;
      }
      if (form.urlType == 5) {
        this.data.value[this.navIndex].url = form.url;
      }
      console.log(this.data.value[this.navIndex]);
      this.navShow = false;
      this.navIndex = null;
      this.navForm = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  .infobox3 {
    width: 340px;
    min-width: 340px;
    height: 100%;
    background: #f8f9fa;
    overflow-y: hidden;
    padding: 0 0px 10px;
    .block1 {
      font-size: 14px;
      font-weight: 600;
      color: #595961;
      padding: 9px 16px 9px 12px;
    }
    .block2_main {
      padding: 0 0 10px 0;
      height: calc(100% - 30px);
      overflow-y: scroll;
      .block2 {
        padding: 0 0 0 10px;
        .info1 {
          padding: 9px 16px 9px 12px;
          font-weight: 600;
          background: #eef0f4;
          border-radius: 5px;
          font-size: 12px;
          font-weight: 600;
          color: #595961;
          .tip1 {
          }
        }
        .info2 {
          padding: 10px;
          .tip1 {
            font-size: 12px;
            color: #595961;
            margin: 0 10px 0 0;
            width: 80px;
          }
          .tip2 {
            width: calc(100% - 80px - 10px);
            .uploadbox {
              cursor: pointer;
              width: 120px;
              height: 120px;
              background: #fff;
              transition: all 0.3s;
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              .plusicon {
              }
              .uploadimg {
                width: 100%;
                height: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
            .uploadbox:hover {
              box-shadow: 0 0 10px 0 #ccc;
            }
          }
          .input {
          }
        }
      }
    }
  }
}
.fileclass {
  position: absolute;
  width: 100%;
  bottom: 0;
  top: 0;
  z-index: 99;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
</style>
